<template>
  <Top-Page class="detail-box">
    <cu-custom bgColor="bg-gradual-white" :isBack="true">
      <template #backText></template>
      <template #content>贡献值明细</template>
      <template #right>
        <view class="mr-10 f-1 rule" @click.stop="toDetailRule">规则</view>
      </template>
    </cu-custom>

    <view class="total-data" v-if="totalData.length">
      <template v-for="(value, key) in totalData" :key="item">
        <view class="field" v-if="Number(value)">
          <view class="field-table">{{ key }}</view>
          <view class="field-value">{{ value }}</view>
        </view>
      </template>
    </view>

    <view class="nav">
      <view
        :class="['nav-item', { active: index == key }]"
        v-for="(item, index) in items"
        :key="item"
        @click="onClickItem(index)"
      >
        {{ item }}
      </view>

      <view :class="['nav__line', key === 0 ? 'nav__line-0' : 'nav__line-1']"></view>
    </view>

    <view class="list">
      <view class="list-item border-bottom-after" v-for="item in container[key].list" :key="item">
        <view class="list-item__left">
          <!-- <view class="left-type">{{ item.type == 1 ? '同心台' : '乾元子' }}</view> -->
          <view class="left-remark">{{ item.remark }}</view>
          <view class="left-create_time">{{ item.create_time }}</view>
        </view>
        <view class="list-item__right">{{ key == 0 ? '+' : '-' }}{{ item.money }}</view>
      </view>
      <uni-load-more v-if="container[key].list.length" :status="container[key].status" />
      <Empty v-else noDatatext="暂无数据" textcolor="#999" />
    </view>
  </Top-Page>
</template>

<script>
import { useloginStore } from '@/store/login';
import pinia from '@/store/index';
const loginStore = useloginStore(pinia);
export default {
  data() {
    return {
      userInfo: loginStore.userInfo,
      current: 0,
      items: ['收入', '支出'],
      query: {
        page: 1
      },
      totalData: {},
      key: 0,
      status: 'more',
      container: {
        0: {
          list: [],
          page: 0,
          status: 'more'
        },
        1: {
          list: [],
          page: 0,
          status: 'more'
        }
      }
    };
  },
  onLoad() {
    this.setSubData();
    this.getpointlog(this.key);
  },
  onReachBottom() {
    if (this.container[this.key].status === 'more') {
      this.getpointlog(this.key);
    }
  },
  methods: {
    toDetailRule() {
      uni.navigateTo({
        url: '/pages/mine/detail-rule'
      });
    },
    setSubData() {
      if (this.userInfo.referrer_info != 0) {
        // this.list = [this.userInfo.referrer_info];
        this.status = 'no-more';
      }
    },
    onClickItem(index) {
      if (this.current == index || this.status === 'loading') return;

      this.current = index;
      this.key = index;
      this.getpointlog(index);
    },
    getpointlog(type) {
      if (this.container[type].status === 'no-more') return;
      this.status = 'loading';
      this.container[type].status = 'loading';
      this.container[type].page++;
      this.$api.msgApi
        .getpointlog({
          page: this.container[type].page,
          status: type
        })
        .then((res) => {
          const { data, code, msg, count } = res;

          if (code != 0) {
            uni.showToast({
              title: `${msg}`,
              icon: 'none'
            });
            return;
          }

          const log = data.log;

          if (this.container[type].page === 1) {
            data.txt && (this.totalData['同心台权票数量'] = data.txt);
            data.qyz && (this.totalData['乾元子积分数量'] = data.qyz);
            data.contribution && (this.totalData['贡献值数量'] = data.contribution);
            data.consume && (this.totalData['消费数量'] = data.consume);
            data.lovepoint && (this.totalData['爱心豆'] = data.lovepoint);
            data.trustpoint && (this.totalData['信任豆'] = data.trustpoint);
          }

          this.status = 'more';
          if (!log.length) {
            this.container[type].status = 'no-more';
          } else {
            this.container[type].status = 'more';
            this.container[type].list.push(...log);
          }
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.detail-box {
  width: 750rpx;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.nav {
  width: 686rpx;
  border-radius: 20rpx 20rpx 0 0;
  margin-left: 32rpx;
  margin-top: 32rpx;
  position: sticky;
  top: 100rpx;
  z-index: 100;
  padding: 20rpx 20rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;

  .nav__line {
    position: absolute;
    bottom: 16rpx;
    width: 60rpx;
    height: 4rpx;
    border-radius: 8rpx;
    background-color: #1677ff;
    transition-duration: 0.3s;
  }

  .nav__line-0 {
    left: 22%;
  }
  .nav__line-1 {
    left: 69.6%;
  }

  .nav-item {
    width: 100%;
    padding: 20rpx;
    border-radius: 12rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 32rpx;
    color: #333333;
    line-height: 38rpx;
    text-align: center;
    font-style: normal;
    text-transform: none;
  }
}

.rule {
  color: #999;
}

.total-data {
  width: 686rpx;
  border-radius: 20rpx;
  margin-left: 32rpx;
  margin-top: 32rpx;
  padding: 40rpx 0;
  display: flex;
  flex-direction: row;
  background-color: #fff;
  flex-wrap: wrap;
  text-align: center;

  .field {
    width: 33.33%;
    padding: 10rpx 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-content: space-between;

    &:nth-child(n + 4) {
      margin-top: 20rpx;
    }

    .field-table {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 22rpx;
      color: #707070;
      line-height: 26rpx;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }

    .field-value {
      word-break: break-all;
      font-family: Bebas Neue, Bebas Neue;
      margin-top: 14rpx;
      font-weight: 400;
      font-size: 48rpx;
      color: #1a1a1a;
      line-height: 1;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }
  }
}

.list {
  width: 686rpx;
  margin-left: 32rpx;
  flex: 1;
  background-color: #fff;
  font-size: 28rpx;

  .list-item {
    padding: 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    font-size: 26rpx;

    .left-type {
      color: #333;
    }

    .left-create_time {
      margin-top: 12rpx;
      color: #999;
    }

    .list-item__right {
      color: #1677ff;
      font-weight: 600;
      font-size: 32rpx;
    }
  }
}
</style>
